<template>
    <div class="commodityList">
        <img :src="taocan.s_cover" alt="">
        <div>
            <div class="title">
                <h3>{{taocan.s_title}}</h3>
                <p>周末可约</p>
            </div>
            <!-- <div class="item">
                <div class="a">入职体检</div>
                <div class="option">入职体检</div>
                <div class="option">入职体检</div>
                <div class="option">入职体检</div>
                <div class="option">入职体检</div>
                <div class="option">入职体检</div>
                <div class="option">入职体检</div>
            </div> -->
            <p class="price">￥{{taocan.s_price}}</p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { taocanType } from "@/type/Location";
let props = defineProps<{taocan:taocanType}>()
</script>

<style lang="scss" scoped>
@import url("//at.alicdn.com/t/c/font_3903764_8kotvp32fp4.css");

h3 {
    margin: 0;
}

.commodityList {
    display: flex;

    >img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        margin-right: 16px;
    }

    >div {
        flex-grow: 1;
        >.title {
            display: flex;
            justify-content: space-between;

            >h3 {
                font-size: 16px;
                width: 75%;
            }

            >p {
                width: 20%;
            }

            @media screen and (max-width:400px) {
                >p {
                width: 22%;
            }
            }

           
        }

        >.item {
            display: flex;
            flex-wrap: wrap;
            margin: 10px 0;

            >div {
                // margin: 5px;
                padding: 0 5px;

                &.a {
                    color: #5484ca;
                    background-color: #e6f2fe;
                }

                &.option {
                    color: #838383;
                    background-color: #f7f7f7;
                }
            }
        }

        >.price {
            color: #d06847;
            font-size: 16px;
            font-weight: bold;
        }
    }
}</style>